<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
    
     <div class="container-div">
		<div class="row">
			<div class="col-sm-12 search-collapse">
				<form id="formId">
					<div class="select-list">
						<ul>
						    <li class="select-time">
							<label >支付方式:</label>
                               <select  name="chargeWay" id="chargeWay" onchange="$.table.search()" >
                                <option   ></option>
                                <option value="微信支付" >微信支付</option>
                                <option value="支付宝" >支付宝 </option>
                                </select>
							</li>
							<li class="select-time">
							<label >支付状态：</label>
                               <select  name="payState" id="payState" onchange="$.table.search()" >
                                <option  ></option>
                                <option value="0">未支付</option>
                                <option value="1">支付成功 </option>
                                <option value="2" >支付失败</option>
                                <option value="3" >退款成功</option>
                                </select>
							</li>
							<li>
								商户订单号：<input type="text" name="outTradeNo"/>
							</li>
							<li>
								支付单号：<input type="text" name="transactionId"/>
							</li>
							<li class="select-time">
							    <label>创建时间： </label>
							    <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>
								<span>-</span>
								<input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]"/>
								<!-- 交易时间：<input type="text" name="chargeTime"/> -->
							</li>
							
							<li class="select-time">
							
							<label >选择时间范围：</label>
                               <select  name="time" id="time" onchange="$.table.search()" >
                                <option value="0"  ></option>
                                <option value="1" >今日</option>
                                <option value="2" >昨日 </option>
                                <option value="3" >过去七天</option>
                                <option value="4" >过去30天</option>
                                </select>
                                
							</li>
			                         

							<li>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
								<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
							</li>
						</ul>
					</div>
				</form>
			</div>
			
	        <div class="btn-group-sm hidden-xs" id="toolbar" role="group">
	        
				<a class="btn btn-danger btn-del btn-del disabled" onclick="$.operate.removeAll()" shiro:hasPermission="gxgw_modules:chargeLog:remove">
					<i class="fa fa-remove"></i> 删除
				</a>
				<a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="gxgw_modules:chargeLog:export">
						<i class="fa fa-download"></i> 导出
				 </a>
			</div>
			<div class="col-sm-12 select-table table-striped">
				<table id="bootstrap-table" data-mobile-responsive="true"></table>
			</div>
			<div class="col-sm-12 search-collapse" style="width: 100%; height: 100%;">
				<form id="chartType" style="overflow: hidden;">
					<div class="select-list">
						<ul>
							<li>
								按
								<input class="typeRadio" type="radio" name="type" value="year" checked="true" />年
								<input class="typeRadio" type="radio" name="type" value="season" />季度
								<input class="typeRadio" type="radio" name="type" value="month" />月
								查询
							</li>
							<li class="yearLi">
								<label class="control-label">选择时间：</label>
								<input type="text" class="chart-year" id="chartYear" name="chartYear" style="display: inline-block;"/>
							</li>
							<li class="monthLi" style="display: none;">
								<label class="control-label">选择时间：</label>
								<input type="text" class="chart-month" id="chartMonth" name="chartMonth" style="display: inline-block;"/>
							</li>
							<li>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="searchChart()"><i
										class="fa fa-search"></i>&nbsp;搜索</a>
							</li>
						</ul>
					</div>
				</form>
				<div id="myChart" style="width: 100%; height: 100%;"></div>
			</div>
		</div>
	</div>
    <div th:include="include :: footer"></div>
	 <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('gxgw_modules:chargeLog:edit')}]];
        var removeFlag = [[${@permission.hasPermi('gxgw_modules:chargeLog:remove')}]];
        var prefix = ctx + "gxgw_modules/chargeLog";
		var myChart = echarts.init(document.getElementById('myChart'));
		var chartOpt = {
			tooltip: {
				trigger: 'axis',
				formatter: function (params) {
					return params[0].name + ": " + params[0].value;
				}
			},
			xAxis: {
				type: 'category',
				data: []
			},
			yAxis: {
				type: 'value',
				name: "总额/元",
				splitLine: {
					show: false
				}
			},
			series: [{
				name: '用户注册统计',
				type: 'line',
				data: []
			}]
		}
        $(function() {
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
				exportUrl: prefix + "/export",
                modalName: "支付记录",
				search: false,
		        showExport: true,
                columns: [{
		            checkbox: true
		        },
				{
					field : 'chargeLogId', 
					title : '支付订单编号',
					visible: false
				},
				{
					field : 'userId', 
					title : '用户编号',
					sortable: true
				},
				{
					field : 'chargeAmount', 
					title : '支付总额',
					sortable: true
				},
				{
					field : 'chargeTime', 
					title : '交易时间',
					sortable: true
				},
				{
					field : 'body', 
					title : '商品描述',
					sortable: true
				},
				{
					field : 'chargeWay', 
					title : '支付方式:(支付宝，微信)',
					sortable: true
				},
				{
					field : 'payState', 
					title : '支付状态',
					sortable: true,
					formatter: function (value) {
						switch (value) {
							case 0:
								return '未支付'
							case 1:
								return '支付成功'
							case 2:
								return '支付失败'
							case 3:
								return '退款成功'
							
						}
					}
					
				},
				{
					field : 'outTradeNo', 
					title : '商户订单号',
					sortable: true
				},
				{
					field : 'transactionId', 
					title : '支付单号',
					sortable: true
				},
			
		        {
		            title: '操作',
		            align: 'center',
		            formatter: function(value, row, index) {
		            	var actions = [];
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" onclick="$.operate.remove(\'' + row.chargeLogId + '\')"><i class="fa fa-remove"></i>删除</a>');
						return actions.join('');
		            }
		        }]
            };
            $.table.init(options);

            $('.typeRadio').change(function () {
                var value = $("input[name='type']:checked").val();
				if(value === 'year' || value === 'season'){
					$('.monthLi').css('display', 'none');
					$('.yearLi').css('display', 'block');
				} else if(value === 'month'){
					$('.yearLi').css('display', 'none');
					$('.monthLi').css('display', 'block');
				}
            })
        });

        var searchChart = function () {
            var value = $("input[name='type']:checked").val();
            if(value === 'year'){
                getChartByYear();
            } else if(value === 'season'){
                getChartBySeason();
            } else if(value === 'month'){
                getChartByMonth();
            }
        }

        var getChartByYear = function () {
			var year = $('#chartYear').val();
            $.get(prefix+'/selectNumByYear/'+year, function (data) {
                console.log(data)
				var xaxis = [];
				var yaxis = [];
				for(var i=0; i<data.length; i++){
					xaxis.push(data[i].mouth+"月");
					yaxis.push(data[i].number);
				}
				chartOpt.xAxis.name = "月份";
				chartOpt.xAxis.data = xaxis;
				chartOpt.series[0].data = yaxis;
				myChart.setOption(chartOpt);
            })
        };
        var getChartBySeason = function () {
			var year = $('#chartYear').val();
            $.post(prefix+'/countByQuart?year='+year, function (data) {
                console.log(data)
				var xaxis = [];
				var yaxis = [];
				for(var i=0; i<data.length; i++){
					xaxis.push("第"+data[i].quarter+"季度");
					yaxis.push(data[i].amount);
				}
				chartOpt.xAxis.name = "季度";
				chartOpt.xAxis.data = xaxis;
				chartOpt.series[0].data = yaxis;
				myChart.setOption(chartOpt);
            })
        }
        var getChartByMonth = function () {
			var value = $('#chartMonth').val();
			var year = value.split('-')[0];
			var month = parseInt(value.split('-')[1]);
            $.get(prefix+'/selectNumByMouth/'+year+'/'+month, function (data) {
                console.log(data)
				var xaxis = [];
				var yaxis = [];
				for(var i=0; i<data.length; i++){
					xaxis.push(data[i].day);
					yaxis.push(data[i].number);
				}
				chartOpt.xAxis.name = "日期";
				chartOpt.xAxis.data = xaxis;
				chartOpt.series[0].data = yaxis;
				myChart.setOption(chartOpt);
            })
        };
    </script>
</body>
</html>